<template>
    <div>
        <div class="top">
          <div class="topBox">
            购物车

            <div class="text" @click="cliDel">编辑</div> 
            <div class="iconfont icon-fanhui1" @click="isBack"></div> 
          </div>
        </div>

       <div class="list-right">
          <div class="listContent" v-for="(item,index) in cartList" :key="index">
              <!-- <span class="iconfont icon-xuanzhongyuandian"></span> -->
              <img class="choseImg" :src="require('@/assets/img/'+(item.isChosen ? 'chosen' : 'unchosen' ) +'.png')" @click="chooseItem(item)" alt="">
              <div class="listContentLeft">
                  <img class="img" :src="item.goodsImg">
                  <div class="name-price">
                      <span class="name">{{item.goodsName}}</span>
                      <span class="price">￥{{item.goodsPrice}}/斤</span>
                      <span class="sku">已选规格: {{item.buySku}}/装</span>
                  </div>
              </div>

              <div class="listContentRight">
                  <span class="iconfont icon-jian1" @click="onDecrease(item)"></span>
                  <span class="num">{{item.buyNum}}</span>
                  <span class="iconfont icon-jia" @click="onIncrease(item)"></span>
              </div>
          </div>

        </div>

        <div class="searchBot">
            <div class="searchBotL">
                <!-- <span class="iconfont icon-xuanzhongyuandian"></span> -->
                 <img class="choseImg" :src="require('@/assets/img/'+(isAll ? 'chosen' : 'unchosen' ) +'.png')" @click="chooseAll" alt="">
                <span class="all">全选</span>
            </div>
          
          <div class="searchBox">
            <div class="searchBotR" v-show="searchBotR">
                <div class="totle">
                    <span class="totleL">合计:</span>
                    <span class="totleMony">￥{{chosenList | calcTotal | keepDouble}}</span>
                </div>
                <div class="buy" @click="endbuy">去结算</div>
            </div>
            
            <div class="del" v-show="del" @click="delAll">删除</div>
          </div>    
            
        </div>

  </div>
</template>

<script>
  import { Toast } from 'vant'
  
  export default {

      data() {
        return {
          searchBotR:true,
          del:false,
          token:'',
          cartList:[],
        
        }
      },

       computed: {
             isAll: {
                // 获取
                get(){
                    // 获取全选的状态，其实就是判断每个选项是否都被选中
                    return this.cartList.every(e => e.isChosen)
                },
                // 更改
                set(newVal){
                    // 改变全选的状态，其它就是让每个选项发生相同的改变
                    this.cartList.forEach(e => e.isChosen = newVal)
                }
            },
            // 被选中的商品列表
            chosenList(){
                const result = this.cartList.filter(e => e.isChosen)
                // console.log(result)
                return result
            }

        },
         filters: {
            // 合计
            calcTotal(list){
                return list.reduce((prevTotal,currItem) => {
                    return prevTotal + currItem.goodsPrice*currItem.buyNum
                },0)
            },
            // 保留两位小数
            keepDouble(num){
                return num.toFixed(2)
            }

        },

      methods: {
        //点击返回
        isBack(){
            this.$router.back()
        },
        //获取数据渲染
          reqCartList(){
            this.$axios.post('/zhouliang/api/cartinfo/t/list',{
              token:this.token
            })
            .then((res)=>{

            
              const {code,list,msg}=res

              console.log(res)

              const {buyNum}=list

              if(code==1){
                this.cartList=list.map(e=>({
                  ...e,
                  isChosen:false
                }))
              }else if(code==-1){
                Toast(msg)
              }else if(code==-2){
                Toast(msg)
                this.$router.push('/login')
              }

            })
          },

          //单选
          chooseItem(item){
          item.isChosen=!item.isChosen
          },

          //全选
          chooseAll(){
            this.isAll = !this.isAll

          },

          //点击编辑
          cliDel(){
              this.del=!this.del

              this.searchBotR=!this.searchBotR
          },

          //点击删除
            delAll(){
                // 获取选中的商品列表，每个数组元素是一个json
                const chosenList = this.chosenList

                // 至少选中一个才能删除
                if(!chosenList.length){
                    Toast('请选择商品')
                    return false
                }

                // 遍历这个数组，取出每个元素的_id，然后用逗号拼接起来
                let cartIds = ''
                for(let e of chosenList){
                    cartIds += ',' + e._id
                }
                cartIds = cartIds.slice(1)

                this.$axios.post('/zhouliang/api/cartinfo/t/del',{
                    token: this.token,
                    cartIds: cartIds
                })
                .then((res) => {
                    const {code,msg} = res

                    if(code == 1){
                       Toast(msg)
                        
                        // 请求成功之后才会删除页面上的商品
                        const cartList = this.cartList
                        for(let i=0;i<cartList.length;i++){
                            if(cartList[i].isChosen){
                                cartList.splice(i,1)
                                i-- // 每次删完，下标减1
                            }
                        }
                    }else{
                        Toast(msg)
                    }
                })                
            },



          //点击增加
            onIncrease(item){
              const buyNum=item.buyNum+1
              this.$axios.post('/zhouliang/api/cartinfo/t/update',{
                    token:this.token,
                    cartId:item._id,
                    buyNum,
              })
              .then((res)=>{
                  console.log(res)
                    const {code,msg}=res
                    if(code==1){
                        item.buyNum = buyNum
                    }else{
                        console.log(msg)
                    }
              })
                
            },

            //点击减少
            onDecrease(item){
                
                 if(item.buyNum<=1){
                      Toast('数量不能少于1件')
                      return false
                  }
                  const buyNum=item.buyNum-1

                this.$axios.post('/zhouliang/api/cartinfo/t/update',{
                    token:this.token,
                    buyNum:buyNum,
                    cartId:item._id
                })
                .then((res)=>{
                    console.log(res)
                     const {code,msg}=res
                    if(code==1){
                        item.buyNum = buyNum
                      
                    }else{
                        Toast(msg)
                    }

                })
            },

            //点击结算
            endbuy(){

                if(!this.chosenList.length){
                  Toast('请选择商品')
                }else{
                  Toast('购买成功')
                }
            }

      },

      mounted() {
        
        const token=localStorage.getItem('token')
        this.token=token

        this.reqCartList()

     


      },


    components: {
     
    },
  }




</script>

<style lang="scss" scoped>
    .top{
        width: 100vw;
        height: 1rem;
        background-color: #3ac149;
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1000;

        .topBox{
            width: 90%;  
            height: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.35rem;
            position: relative;

            .text{
                position: absolute;
                right: 0;
                font-size: 0.24rem

            }
            .iconfont{
              position: absolute;
                left:0;
                font-size: 0.24rem
              }
              
        }
    }



 .searchBot{
    width: 100vw;
    height: 0.8rem;
    background-color: white;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 1rem;
    left: 0;
 
    .searchBotL{
        display: flex;
        align-items: center;

       
        .choseImg{
          width: 0.4rem;
          height: 0.4rem;
          padding: 0 0.2rem;
        }
       
       
    }
    .searchBox{
      
      .searchBotR{
          display: flex;
          align-items: center;
          box-sizing: border-box;
          

          .totle{
              margin:0 0.2rem;

              .totleMony{
                  color: red;
              }


          }
          .buy{
            background-color: #3ac149;
            font-size: 0.2rem;
            padding: 0 0.6rem;
            height: 0.8rem;
            line-height: 0.8rem;
            color: white;

          }
      }
      .del{
         background-color: #3ac149;
            font-size: 0.2rem;
            padding: 0 0.6rem;
            height: 0.8rem;
            line-height: 0.8rem;
            color: white;
      }




  }


    
}


.list-right{
  width:100vw;
  right: 0;
  top: 0;
  background-color: white;
  top: 1.8rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.8rem;
  
  .listContent{
      display: flex;
      padding: 0.2rem 0.2rem;
      align-items: center;
      border-bottom: 1px solid #ebe8e8;
      position: relative;
      
      .choseImg{
        width: 0.4rem;
        height: 0.4rem;
      }
      .listContentLeft{
          display: flex;
          align-items: center;
          margin-left: 0.5rem;
          
          .img{
              width: 1.5rem;
              height: 1.5rem;
          }

          .name-price{
              margin-left: 0.3rem;
              display: flex;
              flex-direction: column;

              .price{
                padding: 0.1rem 0;
              }
          }
      }
      .listContentRight{
          position: absolute;
          right: 0.2rem;
          top:50%;
          bottom:50%;
          margin: auto;

            .num{
                font-size: 0.35rem;
            }

            .iconfont{
              font-size: 0.4rem;
              padding: 0 0.2rem;
            }
            .icon-jia{
                color: #3bc049;
            }
            .icon-jian1{
                color: rgb(240, 233, 233);
            }
      }

  }
}
 
</style>